<template>
  <div class="container">
    <el-card class="box-card">
      <el-form
      :inline="true"
      :model="DirectoryQuery"
      ref="DirectoryQuery"
      size="small"
      class="DirectoryQuery"
      >
        <div class="left">
          <el-form-item
          label="目录名称"
          prop="directoryName">
            <el-input v-model="DirectoryQuery.directoryName"></el-input>
          </el-form-item>
          <el-form-item
          label="状态"
          prop="state"
          class="state">
            <el-select
            v-model="DirectoryQuery.state"
            placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm()">清除</el-button>
            <el-button type="primary" @click="onSubmit()">搜索</el-button>
          </el-form-item>
        </div>
        <div class="left">
          <el-button type="success" size="small" class="add" @click="addDirectory"
            ><i class="el-icon-edit" /> 新增目录</el-button>
        </div>
      </el-form>
      <el-alert
      :title="InfoNum"
      type="info"
      show-icon
      :closable="false" />
      <el-table
        :data="SubjectDirectory"
        style="width: 100%"
        class="SubjectTable"
        :header-cell-style="{ background: '#fff' }"
      >
        <el-table-column
        type="index"
        label="序号"
        width="80">
        </el-table-column>
        <el-table-column
        prop="subjectName"
        label="所属学科" >
        </el-table-column>
        <el-table-column
        prop="directoryName"
        label="目录名称">
        </el-table-column>
        <el-table-column
        prop="username"
        label="创建者" >
        </el-table-column>
        <el-table-column
        prop="addDate"
        :formatter="formatTime"
        label="创建日期"
        >
        </el-table-column>
        <el-table-column
        prop="totals"
        label="面试题数量" >
        </el-table-column>
        <el-table-column
        prop="state"
        label="状态" >
          <template v-slot="{ row }">
            {{ row.state === 0 ? "已禁用" : "已启用" }}
          </template>
        </el-table-column>
        <el-table-column
        label="操作" >
          <template slot-scope="{ row }">
            <el-button type="text" @click="enableRow(row)">{{ row.state === 1 ? "禁用" : "启用" }}</el-button>
            <el-button type="text" :disabled="row.state === 1 ? true : false" @click="changeRow(row)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1 ? true : false" @click="deleteRow(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
        background
        :total="total"
        :current-page="page"
        :hide-on-single-page="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        layout="sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-card>
     <!-- 弹出框 -->
     <div>
      <DirectorysDialog
      ref="addDialog"
      :isChange="isChange"
      :rowDate="rowDate"
      v-model="visible"
      @Refresh='getSubjectDirectory'/>
    </div>
    </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys'
import DirectorysDialog from './components/directorys-dialog'
// import lodash from 'lodash'
export default {
  components: { DirectorysDialog },
  data () {
    return {
      DirectoryQuery: {
        directoryName: '',
        state: ''
      },
      InfoNum: '数据一共 11 条',
      SubjectDirectory: [], // 总数据
      total: 0, // 数据总数
      page: 1, // 当前页码
      pagesize: 10, // 每页显示的条数
      isChange: true, // 弹出框数据
      rowDate: {}, // 弹出框数据
      visible: false // 弹出框显示状态
    }
  },
  created () {
    // 初始化时获取目录数据
    this.getSubjectDirectory()
  },
  methods: {
    // 搜索按钮
    onSubmit () {
      this.getSubjectDirectory()
      this.page = 1
    },
    // 清除按钮
    resetForm () {
      this.$refs.DirectoryQuery.resetFields()
      this.page = 1
      this.getSubjectDirectory()
    },
    // 获取目录数据
    async getSubjectDirectory () {
      if (this.DirectoryQuery.state === '') {
        const res = await list({ page: this.page, pagesize: this.pagesize, directoryName: this.DirectoryQuery.directoryName })
        this.SubjectDirectory = res.data.items
        console.log(res)
        this.total = res.data.counts
        this.InfoNum = `数据一共 ${res.data.counts} 条`
      } else {
        const res = await list({ page: this.page, pagesize: this.pagesize, ...this.DirectoryQuery })
        this.SubjectDirectory = res.data.items
        console.log(res)
        this.total = res.data.counts
        this.InfoNum = `数据一共 ${res.data.counts} 条`
      }
    },
    // 格式化时间
    formatTime (row, column) {
      const data = row[column.property]
      const dtime = new Date(data)
      const year = dtime.getFullYear()
      let month = dtime.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = dtime.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let hour = dtime.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      let minute = dtime.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      let second = dtime.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
      )
    },
    // 每页条数变化
    handleSizeChange (val) {
      this.pagesize = val
      this.getSubjectDirectory()
      console.log(`每页 ${val} 条`)
    },
    // 当前页码变化
    handleCurrentChange (val) {
      this.page = val
      this.getSubjectDirectory()
      console.log(`当前页: ${val}`)
    },
    // 新增目录按钮点击事件
    addDirectory () {
      this.isChange = false
      this.visible = true
    },
    // 启用/禁用行
    async enableRow (row) {
      if (row.state === 1) {
        await changeState({ id: row.id, state: 0 })
      } else {
        await changeState({ id: row.id, state: 1 })
      }
      this.getSubjectDirectory()
    },
    // 修改行
    changeRow (data) {
      this.rowDate = data
      this.isChange = true
      this.visible = true
    },
    // 删除行
    async deleteRow (row) {
      await remove({ id: row.id })
      this.getSubjectDirectory()
    },
    // 关闭弹出框
    closeDialog () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  .DirectoryQuery {
    padding-left: 12px;
    display: flex;
    justify-content: space-between;
    .state {
      margin-left: 40px;
    }
  }
  .SubjectTable {
    margin-top: 12px;
    border-bottom: 1px solid #ebeef5;
  }
  .pagination{
    text-align: right;
    margin-top: 20px;
  }
}
</style>
